<template>
	<view class="pay-content">
		<!-- 板块一 -->
		<view class="patient-msg-show">
			<view class="information-title">
				<img src="@/static/img/pay/line.png" alt="">
				<text>预约信息</text>
			</view>
			<view class="patient-msg-row" v-for="(item,index) in patient" :key="index">
				<text>{{item.title}}</text>
				<text>{{item.main}}</text>
			</view>
			<view class="patient-msg-row">
				<!-- 左边 -->
				<view class="left-column">
					<view>电子健康卡</view>
					<view>点击右侧二维码放大</view>
				</view>
				<!-- 右边二维码 -->
				<image src="../../../icon.png" mode="" class="img"></image>
			</view>
		</view>
		<!-- 板块二 -->
		<view class="patient-msg-show" v-if="isPay">
			<view class="information-title">
				<img src="@/static/img/pay/line.png" alt="">
				<text>缴费信息</text>
			</view>
			<view class="patient-msg-row" v-for="(item,index) in patient2" :key="index">
				<text>{{item.title}}</text>
				<text class="money">￥<text class="bigger">8.00</text></text>
			</view>
		</view>
		<!-- 板块三 -->
		<!-- <view class="patient-msg-show" v-if="isCancel">
			<view class="information-title">
				<img src="@/static/img/pay/line.png" alt="">
				<text>取消信息</text>
			</view>
			<view class="patient-msg-row" v-for="(item,index) in patient2" :key="index">
				<text>{{item.title}}</text>
				<text>缴费信息</text>
			</view>
		</view> -->
		<!-- 板块四 -->
		<!-- <view class="patient-msg-show" v-if="isCancel">
			<view class="information-title">
				<img src="@/static/img/pay/line.png" alt="">
				<text>缴费信息</text>
			</view>
			<view class="patient-msg-row" v-for="(item,index) in patient2" :key="index">
				<text>{{item.title}}</text>
				<text>缴费信息</text>
			</view>
		</view> -->
		<!-- 支付信息 -->
		<pay :payment="100" v-if="!isPay"></pay>
		<u-button v-if="isPay" :custom-style="customStyle" shape="circle" @click="cancelOrder">取消预约</u-button>
		<!-- 模态框 -->
		<u-modal v-model="isshow" title=" " :title-style="{fontWeight:700}" width="80%" :show-confirm-button="false"
			confirm-text="去认证" :content-style="contentStyle">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
				<view class="modal-button">
					<view :style="cancelStyle" @click="closeModal">取消</view>
					<view :style="confirmStyle" @click="toCertification">确认取消</view>
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" class="toast"/>
	</view>
</template>

<script>
	import timeMenu from "./timeMenuComponent.vue";
	import pay from "@/components/pay/pay.vue";
	export default {
		components: {
			timeMenu,
			pay
		},
		onLoad() {
			// 发请求获取。。。
		},
		data() {
			return {
				isshow: true,
				isPay: true, //是否支付显示
				//就诊人信息
				patient: [
					// 	{
					// 	title: '预约状态',
					// 	main: '已预约',
					// }, {
					// 	title: '挂号序号',
					// 	main: '12',
					// },
					{
						title: '接诊医生',
						main: '胡晓静',
						id: 'doctor'
					}, {
						title: '就诊人',
						main: '李元芳',
						id: 'patient'
					}, {
						title: '性别',
						main: '女',
						id: 'sex'
					}, {
						title: '年龄',
						main: '23',
						id: 'age'
					}, {
						title: '就诊时段',
						main: '2022年09月22日 09:00~12:00',
						id: 'site'
					}, {
						title: '就诊时卡号',
						main: '4453656563422',
						id: 'site'
					},
					// {
					// 	title: '就诊医生',
					// 	main: '胡晓静',
					// 	id: 'doctor'
					// },
					{
						title: '院区场地',
						main: '广西南宁林荫校区咨询中心南B区',
						id: 'site'
					}
				],
				patient2: [{
					title: '缴费金额',
					main: '已预约',
				}, {
					title: '缴费时间',
					main: '12',
				}],
				//取消预约
				customStyle: {
					position: "fixed",
					bottom: "30rpx",
					width: "690rpx",
					height: "90rpx",
					// zIndex: 20000
				},
				isshow: false,
				content: '请先完成实名认证才可使用',
				// 确认样式
				confirmStyle: {
					width: "32%",
					height: "80rpx",
					color: "#fff",
					fontSize: "30rpx",
					fontWeight: "bold",
					lineHeight: "80rpx",
					backgroundColor: "#F4333C",
					borderRadius: "40rpx",
				},
				// 取消样式
				cancelStyle: {
					width: "32%",
					height: "80rpx",
					fontSize: "30rpx",
					fontWeight: "bold",
					lineHeight: "80rpx",
					backgroundColor: "#ECECEC",
					borderRadius: "40rpx",
				},
				// 内容样式
				contentStyle: {
					height: "80rpx",
					marginTop: "50rpx",
					marginBottom: "180rpx",
					color: "#666666",
					fontSize: "30rpx",
					fontWeight: "500",
					lineHeight: "80rpx",
					textAlign: "center"
				}

			};
		},
		methods: {
			//点击选择预约时间，显示
			selectHandle() {
				this.showPopup = true;
			},
			// 关闭弹出框
			closeHandle() {
				this.showPopup = false;
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			addPerson() {
				// console.log("添加咨询人");
				uni.navigateTo({
					url: "/pages/addPatient/addPatient"

				})
			},
			// 点击取消显示模态框
			cancelOrder() {
				this.isshow = true;
			},
			//关闭模态框
			closeModal(){
				this.isshow = false;
			},
			// 确认取消
			toCertification(){
				this.isshow = false;
				this.$refs.uToast.show({
					title: '取消成功',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-content {
		padding: 0rpx 30rpx;
		overflow: hidden;

		.patient-msg-show {
			margin-top: 30rpx;

			.information-title {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				>img {
					width: 5rpx;
					height: 28rpx;
				}

				>text {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 10rpx;
				}
			}

			.patient-msg-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;
				border-radius: 12rpx;
				padding: 40rpx 24rpx 20rpx;

				>text:first-child {
					font-size: 30rpx;
					color: #999999;
				}

				>text:last-child {
					font-size: 30rpx;
					color: #333333;
				}

				.left-column {
					>view {
						margin-bottom: 16rpx;
					}
				}

				.img {
					width: 130rpx;
					height: 130rpx;
				}

				.money {
					font-weight: bold;
					color: #333333;

					.bigger {
						font-size: 44rpx;
					}
				}
			}

			.patient-msg-row:last-child {
				padding-bottom: 40rpx;
			}
		}
	}
	// 模态框
	.slot-content {
	
		.modal-button {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
	}
	.toast{
		width: 80%;
		height: 200rpx;
		border-radius: 30rpx;
	}
</style>
